<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
      <el-form-item label="设备类型" prop="deviceType">
        <el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable size="small">
          <el-option
            v-for="dict in deviceTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input
          v-model="queryParams.deviceName"
          placeholder="请输入设备名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="在线状态" prop="deviceOnilne">
        <el-select v-model="queryParams.deviceOnilne" placeholder="请选择在线状态" clearable size="small">
          <el-option
            v-for="dict in deviceOnilneOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备ip" prop="deviceIp">
        <el-input
          v-model="queryParams.deviceIp"
          placeholder="请输入设备ip"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备位置" prop="deviceLocation">
        <el-select v-model="queryParams.deviceLocation" placeholder="请选择设备位置" clearable size="small">
          <el-option
            v-for="dict in deviceLocationOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['lgdz:companydeviceinfo:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['lgdz:companydeviceinfo:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['lgdz:companydeviceinfo:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['lgdz:companydeviceinfo:export']"
        >导出</el-button>
      </el-col>
    </el-row>

    <!-- 卡片面板区域 -->
    <el-card>
      <!-- 设备参数 -->
      <div v-for="(val,key) in companydeviceinfoList" :key="key">
        <el-card  class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px">
              <i class="el-icon-video-camera"></i> 设备参数
            </span>
            <div class="shetu">
              <div class="iconBox-left" v-if="val.deviceOnilne==2">
                <i class="iconfont icon-men"
                  style="color: rgb(198, 199, 199); font-size: 25px"
                ></i>
                <div class="onlineState">离线</div>
              </div>
              <!-- 在线 -->
              <div class="iconBox-left" v-if="val.deviceOnilne==1">
                <i
                  class="iconfont icon-men"
                  style="color: rgb(230, 61, 65);font-size: 25px"
                ></i>
                <div class="onlineState">在线</div>
              </div>
            </div>
          </div>
          <div class="text">
            <div class="textleft">
            <ul>
              <li>设备类型:{{deviceTypeFormat(val)}}</li>
              <li>设备型号:{{deviceModelnumberFormat(val)}}</li>
              <li>设备名称:{{val.deviceName}}</li>
              <li>IP地址:{{val.deviceIp}}</li>
              <li>序列号:{{val.deviceSno}}</li>
              <li>进出方向:{{deviceLocationFormat(val)}}</li>
            </ul>
            </div>
            <el-divider></el-divider>
            <div class="ff">
              <el-button type="text" @click="shebeic(val.deviceIp,val.devicePwd)">重启设备</el-button>
              <el-button type="text" @click="gettime(val.deviceIp,val.devicePwd)">设置时间</el-button>
              <el-button type="text" @click="yuank(val.deviceIp,val.devicePwd)">远程开门</el-button>
              <el-button type="text" @click="btn(val.id,val.deviceIp,val.deviceName,val.devicePwd)">参数设置</el-button>
              <el-button type="text" @click="handleUpdate(val.id)">修改</el-button>
              <el-button type="text"  @click="handleDelete(val.id)">删除</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加人脸设备信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="设备类型">
          <el-select v-model="form.deviceType" placeholder="请选择设备类型" style="width: 100%">
            <el-option
              v-for="dict in deviceTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备型号">
          <el-select v-model="form.deviceModelnumber" placeholder="请选择设备型号" style="width: 100%">
            <el-option
              v-for="dict in deviceModelnumberOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备序列号" prop="deviceSno">
          <el-input v-model="form.deviceSno" placeholder="请输入设备序列号" disabled/>
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
        </el-form-item>
<!--        <el-form-item label="在线状态">-->
<!--          <el-select v-model="form.deviceOnilne" placeholder="请选择在线状态" style="width: 100%">-->
<!--            <el-option-->
<!--              v-for="dict in deviceOnilneOptions"-->
<!--              :key="dict.dictValue"-->
<!--              :label="dict.dictLabel"-->
<!--              :value="dict.dictValue"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="设备ip" prop="deviceIp">
          <el-input v-model="form.deviceIp" placeholder="请输入ip地址" style="width: 74%" />
          <el-button type="primary" icon="el-icon-search" @click="getip">搜索</el-button>
        </el-form-item>
        <el-form-item label="设备密码" prop="devicePwd" id="devicePwd">
          <el-input v-model="form.devicePwd" placeholder="请输入设备密码"/>
        </el-form-item>
        <el-form-item label="通讯端口" prop="devicePort">
          <el-input v-model="form.devicePort" placeholder="请输入通讯端口" />
        </el-form-item>
        <el-form-item label="设备位置">
          <el-select v-model="form.deviceLocation" placeholder="请选择设备位置" style="width: 100%">
            <el-option
              v-for="dict in deviceLocationOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="设备描述" prop="deviceDesc">-->
<!--          <el-select v-model="formes.deviceDesc" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">-->
<!--            <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"-->
<!--                       :value="item.value" :disabled="item.disabled"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改人脸设备信息对话框 -->
    <el-dialog :title="title" :visible.sync="openes" width="500px" append-to-body>
      <el-form :model="formes"  label-width="100px">
        <el-form-item label="设备类型">
          <el-select v-model="formes.deviceType" placeholder="请选择设备类型" style="width: 100%">
            <el-option
              v-for="dict in deviceTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备型号">
          <el-select v-model="formes.deviceModelnumber" placeholder="请选择设备型号" style="width: 100%">
            <el-option
              v-for="dict in deviceModelnumberOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="设备序列号" prop="deviceSno">-->
<!--          <el-input v-model="formes.deviceSno" placeholder="请输入设备序列号" disabled/>-->
<!--        </el-form-item>-->
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="formes.deviceName" placeholder="请输入设备名称" />
        </el-form-item>
<!--        <el-form-item label="在线状态">-->
<!--          <el-select v-model="formes.deviceOnilne" placeholder="请选择在线状态" style="width: 100%">-->
<!--            <el-option-->
<!--              v-for="dict in deviceOnilneOptions"-->
<!--              :key="dict.dictValue"-->
<!--              :label="dict.dictLabel"-->
<!--              :value="dict.dictValue"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="设备ip" prop="deviceIp">-->
<!--          <el-input v-model="formes.deviceIp" placeholder="请输入ip地址" style="width: 74%" />-->
<!--          <el-button type="primary" icon="el-icon-search" @click="getipes">搜索</el-button>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="设备密码" prop="devicePwd">-->
<!--          <el-input v-model="form.devicePwd" placeholder="请输入设备密码"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="通讯端口" prop="devicePort">-->
<!--          <el-input v-model="formes.devicePort" placeholder="请输入通讯端口" />-->
<!--        </el-form-item>-->
        <el-form-item label="设备位置">
          <el-select v-model="formes.deviceLocation" placeholder="请选择设备位置" style="width: 100%">
            <el-option
              v-for="dict in deviceLocationOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="设备描述" prop="deviceDesc">-->
<!--&lt;!&ndash;          <el-input v-model="formes.deviceDesc" placeholder="请输入设备描述" />&ndash;&gt;-->
<!--          <el-select v-model="formes.deviceDesc" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">-->
<!--            <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"-->
<!--                       :value="item.value" :disabled="item.disabled"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormes">确 定</el-button>
        <el-button @click="canceles">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listCompanydeviceinfo, getCompanydeviceinfo, delCompanydeviceinfo, addCompanydeviceinfo, updateCompanydeviceinfo, exportCompanydeviceinfo } from "@/api/lgdz/companydeviceinfo";

  export default {
    name: "Companydeviceinfo",
    data() {
      return {
        item:[],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 人脸设备信息表格数据
        companydeviceinfoList: [],
        // 弹出层标题
        title: "",
        field101Options: [{
          "label": "注册机",
          "value": "注册机"
        }, {
          "label": "门禁",
          "value": "门禁"
        }],
        // 是否显示弹出层
        open: false,
        openes:false,
        // 设备类型字典
        deviceTypeOptions: [],
        // 设备型号字典
        deviceModelnumberOptions: [],
        // 在线状态字典
        deviceOnilneOptions: [],
        // 设备位置字典
        deviceLocationOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deviceType: undefined,
          deviceModelnumber: undefined,
          deviceSno: undefined,
          deviceName: undefined,
          deviceOnilne: undefined,
          deviceIp: undefined,
          deviceLocation: undefined,
        },
        // 表单参数
        form: {},
        formes:{},
        // 表单校验
        rules: {
          deviceName:[
            { required: true, message: "设备名称不能为空", trigger: "blur" }
          ]
        }
      };
    },
    mounted() {
      var h = document.getElementsByClassName('sidebar-container')
      // console.log(h)
      for (var i = 0; i < h.length; i++) {
        h[i].style.display = 'inline'    //获取
      }
    },
    created() {
      this.getList();
      this.getDicts("CompanyDevice_Device_Type").then(response => {
        this.deviceTypeOptions = response.data;
      });
      this.getDicts("CompanyDeviceTable_DeviceModelNumber").then(response => {
        this.deviceModelnumberOptions = response.data;
      });
      this.getDicts("CompanyDeviceInfoTable_DeviceState").then(response => {
        this.deviceOnilneOptions = response.data;
      });
      this.getDicts("CompanyDeviceInfoTable_DeviceDirection").then(response => {
        this.deviceLocationOptions = response.data;
      });
    },
    methods: {
      btn(id,ip,deviceName, devicePwd) {
        // console.log(id,ip,deviceName,devicePwd)
        this.$router.push({
          name: "Pass",
          params: {
            id: id,
            ip: ip,
            deviceName: deviceName,
            devicePwd: devicePwd,
          },
        });
      },
      //设置时间
      gettime(ip,devicePass) {
        const api = "http://192.168.10.175:8088/device/setTime";
        this.$axios({
          url: api,
          method: "post",
          params: {
            ip: ip,
            pass: devicePass,
          },
          // timeout: 1500, //设置超时，单位毫秒
        })
          .then((res) => {
            // console.log(res);
            if (res.data.success == true) {
              this.msgSuccess(res.data.msg);
            } else if (res.data.success == false) {
              this.msgError("设置失败," + res.data.msg + "!!!");
            }
          })
          // .catch((error) => {
          //   this.msgError("请求超时，请重试!");
          // });
      },
      //远程开门
      yuank(ip,devicePwd) {
        const api = "http://192.168.10.175:8088/device/openDoorControl";
        this.$axios({
          url: api,
          method: "post",
          params: {
            ip: ip,
            pass: devicePwd,
          },
          // timeout: 1500, //设置超时，单位毫秒
        })
          .then((res) => {
            // this.msgSuccess(res.data.msg);
            if (res.data.success == true) {
              this.msgSuccess(res.data.msg);
            } else if (res.data.success == false) {
              this.msgError(res.data.msg);
            }
          })
          // .catch((error) => {
          //   this.msgError("请检查设备状态，在重试");
          // });
      },
      //设备重启
      shebeic(ip,devicePass) {
        const api = "http://192.168.10.175:8088/device/restartDevice";
        this.$axios({
          url: api,
          method: "post",
          params: {
            ip: ip,
            pass: devicePass,
          },
          // timeout: 1500, //设置超时，单位毫秒
        })
          .then((res) => {
            // console.log(res);
            if (res.data.success == true) {
              this.msgSuccess("操作成功，设备即将重启");
            } else {
              this.msgError(res.data.msg);
            }
          })
          // .catch((error) => {
          //   this.msgError("请求超时，请重试!");
          // });
      },
      getip() {
        const api = "http://192.168.10.175:8088/device/getSno";
        this.$axios({
          url: api,
          method: "get",
          //用于表示用户代理是否在跨域请求的情况下从其他域中发送cookies
          //  withCredentials:true,//默认为false
          params: {
            ip: this.form.deviceIp,
          },
          timeout: 2000, //设置超时，单位毫秒
        }).then((res) => {
          // console.log(res);
          this.form.deviceSno = res.data.data;
          // console.log(res.data.code)
          if(res.data.code=="500"){
            this.msgError("请检查ip地址是否正确");
          }
          else  if(res.data.success==true){
            this.msgSuccess("序列号读取成功");
          }
        })
      },
      getipes() {
        const api = "http://192.168.10.175:8088/device/getSno";
        this.$axios({
          url: api,
          method: "get",
          //用于表示用户代理是否在跨域请求的情况下从其他域中发送cookies
          //  withCredentials:true,//默认为false
          params: {
            ip: this.formes.deviceIp,
          },
          timeout: 2000, //设置超时，单位毫秒
        }).then((res) => {
          // console.log(res);
          this.formes.deviceSno = res.data.data;
          // console.log(res.data.code)
          if(res.data.code=="500"){
            this.msgError("请检查ip地址是否正确");
          }
          else  if(res.data.success==true){
            this.msgSuccess("序列号读取成功");
          }
        })
      },
      /** 查询人脸设备信息列表 */
      getList() {
        this.loading = true;
        listCompanydeviceinfo(this.queryParams).then(response => {
          // console.log(response)
          this.companydeviceinfoList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 设备类型字典翻译
      deviceTypeFormat(row, column) {
        return this.selectDictLabel(this.deviceTypeOptions, row.deviceType);
      },
      // 设备型号字典翻译
      deviceModelnumberFormat(row, column) {
        return this.selectDictLabel(this.deviceModelnumberOptions, row.deviceModelnumber);
      },
      // 在线状态字典翻译
      deviceOnilneFormat(row, column) {
        return this.selectDictLabel(this.deviceOnilneOptions, row.deviceOnilne);
      },
      // 设备位置字典翻译
      deviceLocationFormat(row, column) {
        return this.selectDictLabel(this.deviceLocationOptions, row.deviceLocation);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 取消按钮
      canceles() {
        this.openes = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          deviceType: undefined,
          deviceModelnumber: undefined,
          deviceSno: undefined,
          deviceName: undefined,
          deviceOnilne: undefined,
          deviceIp: undefined,
          devicePwd: undefined,
          devicePort: undefined,
          deviceLocation: undefined,
          deviceDesc: undefined,
          crtime: undefined,
          uptime: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加人脸设备信息";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        // const id = row.id || this.ids
        getCompanydeviceinfo(row).then(response => {
          this.formes = response.data;
          this.openes = true;
          this.title = "修改人脸设备信息";
          // this.devicePwd.style=displ
          // devPw.style.display="none"
        });
      },
      /** 提交按钮 */
      submitForm: function() {
        // this.$refs["form"].validate(valid => {
        //   if (valid) {
        //     if (this.form.id != undefined) {
        //       updateCompanydeviceinfo(this.form).then(response => {
        //         if (response.code === 200) {
        //           this.msgSuccess("修改成功");
        //           this.open = false;
        //           this.getList();
        //         } else {
        //           this.msgError(response.msg);
        //         }
        //       });
        //     } else {
              addCompanydeviceinfo(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                  this.formes=[]
                } else {
                  this.msgError(response.msg);
                }
              });
            // }
          // }
        // });
      },
      /** 提交按钮 */
      submitFormes: function() {
              updateCompanydeviceinfo(this.formes).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.openes= false;
                  this.getList();
                }
              });

      },
      /** 删除按钮操作 */
      handleDelete(row) {
        // console.log(row)
        // const ids = row.id || this.ids;
        this.$confirm('是否确认删除人脸设备信息编号为"' + row + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delCompanydeviceinfo(row);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有人脸设备信息数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportCompanydeviceinfo(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
      }
    }
  };
</script>
<style lang="less" scoped>
  /*/deep/.el-input__inner {*/
  /*  height: 30px;*/
  /*}*/
  /*/deep/.el-form-item__label {*/
  /*  padding: 0 8px 0 10px;*/
  /*}*/
  .el-col {
    display: flex;
    padding: 0 15px;
  }
  /deep/.el-card__body {
    padding: 10px 20px 0 20px;
  }
  .box-card {
    width: 420px;
    float: left;
    font-size: 16px;
    background-color: #F2F2F2;
    margin: 10px;
    /*box-shadow: 0 0 7px 2px rgb(228, 219, 219) !important;*/
  }

  .text {
    /*margin-left: 20px;*/
    font-size: 14px;
  }
.textleft{
  margin-left: 20px;
}
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
 .el-card {
     border: none !important;

  }
  ul li {
    margin: 0 0 8px 0px !important;
    list-style: none;
  }
  ul{
    padding-inline-start: 0px !important;
    margin-block-start: 0 !important;
  }
  .el-divider--horizontal {
    margin: 0;
  }
  .el-col[data-v-1c4236ae] {
    padding: 0;
  }
  /deep/.el-card__header {
    padding: 10px 20px !important;
  }
  .el-card.is-always-shadow {
     box-shadow:none !important;
  }
  /*/deep/.el-button--medium {*/
  /*  padding: .05rem 0rem;*/
  /*  font-size: 14px;*/
  /*  border-radius: 4px;*/
  /*}*/
  .ff{
    float: right;
  }
  .shetu {
    float: right;
  }
  .onlineState {
    font-size: 12px;
  }
</style>
